<script setup lang="ts">
import TheHeader from "./components/the-header.vue";
import TheSiderMenu from "./components/the-sider-menu.vue";
import {useAppStore} from "./stores/appStore";

const appStore = useAppStore()
</script>

<template>
  <a-layout>
    <the-header/>
    <a-layout>
      <the-sider-menu/>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item v-for="(item, index) in appStore.menuKeyPath" :key="index">{{ item }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
          <router-view/>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<style scoped>

</style>
